<template>
  <div class="address-box">
    <nav-bar class="header">
      <div slot="left" @click="goBack" class="back-icon">
        <img src="~assets/img/common/back.svg" alt="">
      </div>
      <div slot="center">地址管理</div>
    </nav-bar>
    <div class="address-item">
      <van-address-list
        v-if="from != 'mine'"
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        @select="select"
      />
      <van-address-list
        v-else
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { AddressList } from 'vant';
import NavBar from 'components/common/navbar/NavBar';

import { getAddressList } from 'network/address'
Vue.use(AddressList);
export default {
  components:{
    NavBar,

  },
  data() {
    return {
      chosenAddressId: '1',
      list: [],
      from: this.$route.query.from
    }
  },
  async mounted() {
    const { data } = await getAddressList()
    this.list = data.map(item => {
      return {
        id: item.addressId,
        name: item.userName,
        tel: item.userPhone,
        address: `${item.provinceName}${item.cityName} ${item.regionName} ${item.detailAddress}`,
        isDefault: !!item.defaultFlag
      }
    })
  },
  methods: {
    goBack(){
      this.$router.push({ path: '/profile' })
    },
    onAdd() {
      this.$router.push({ path: `address-edit?type=add&from=${this.from}`})
    },
    onEdit(item, index) {
      this.$router.push({ path: `address-edit?type=edit&addressId=${item.id}&from=${this.from}` })
    },
    select(item, index) {
      this.$router.push({ path: `create-order?addressId=${item.id}&from=${this.from}` })
    }
  },
}
</script>

<style lang="less" scoped>
  .van-address-list{
    margin-top: 44px;
  }
  .address-box /deep/ .van-radio__icon {
      display: none;
  }
  
  .address-box /deep/ .van-button {
    background: #ff8198;
    border-color: #ff8198;
  }  
</style>